<template>
  <div class="d-flex flex-grow align-self-center" :class="m.had.isBetOne ? 'sg' : 'bt-l bl-l'">
    <div class="g box-xl py-1" :class="on('spf|胜')" @click="select('spf|胜')">
      <div :class="{'text-red': m.hostHot}"><small>{{m.hostRank}}</small>{{m.hostShort}}</div>
      <b class="text-grey">主胜{{m.had.win}}</b>
    </div>
    <div class="g grow py-1" :class="on('spf|平')" @click="select('spf|平')">
      <div>VS</div>
      <b class="text-grey">平{{m.had.flat}}</b>
    </div>
    <div class="g box-xl py-1" :class="on('spf|负')" @click="select('spf|负')">
      <div :class="{'text-red': m.guestHot}">{{m.guestShort}}<small>{{m.guestRank}}</small></div>
      <b class="text-grey">客胜{{m.had.lose}}</b>
    </div>
  </div>
</template>

<script>
import { mixin } from './calculator'

export default {
  name: 'layout-spf',
  mixins: [mixin]
}
</script>
